<template>
  <main-card
    :no-wrapper="VUE_APP_MODE !== 'system'"
    :no-padding="VUE_APP_MODE !== 'system'"
    :no-shadow="VUE_APP_MODE !== 'system'"
  >
    <div id="wrapper">
      <div class="processwrapper">
        <div class="processwrapper__aligncenter">
          <div class="processwrapper__node">
            <div class="processwrapper__node__info" @click="editApplicant">
              <div class="processwrapper__node__title">applicant</div>
              <div class="processwrapper__node__content">{{ applicant }}</div>
            </div>
            <div class="processwrapper__node__connector">
              <div class="processwrapper__node__verticalLine"></div>
            </div>
            <img
              src="@assets/logo.png"
              alt=""
              class="processwrapper__node__adder"
              @click="addTerm"
            />
          </div>
        </div>
        <div class="processwrapper__aligncenter">
          <div class="processwrapper__chart__horizontalLine" ref="horiconnector"></div>
        </div>
        <div class="processwrapper__aligncenter">
          <div
            class="processwrapper__chart"
            v-for="(item, index) in processList"
            :key="index"
            :ref="'process' + index"
          >
            <div class="processwrapper__chart__verticalAxis"></div>
            <div v-for="(item1, index1) in item.children" :key="index1">
              <div
                class="processwrapper__aligncenter"
                :class="index1 == 0 ? 'customized__marginTop' : ''"
                v-if="item1.type == 'block'"
              >
                <div class="processwrapper__node">
                  <div class="processwrapper__node__info">
                    <div class="processwrapper__node__title">{{ item1.title }}</div>
                    <div class="processwrapper__node__content">{{ item1.content }}</div>
                    <i
                      class="el-icon-remove processwrapper__node__delete"
                      @click="removeNode(index, index1)"
                    ></i>
                  </div>
                  <img
                    src="@assets/logo.png"
                    alt=""
                    class="processwrapper__node__adder"
                    @click="addNode(index, index1)"
                  />
                </div>
              </div>
              <div class="processwrapper__branchOutWrapper" v-if="item1.type == 'sub'">
                <img
                  src="@assets/logo.png"
                  alt=""
                  class="processwrapper__branchOutWrapper__adder1"
                  @click="addNodeTerm(index, index1)"
                  style="z-index:1"
                />
                <div
                  class="processwrapper__branchWrapper customized__marginBottem"
                  style="width: auto"
                >
                  <div
                    class="processwrapper__chart1"
                    v-for="(item2, index2) in item1.children"
                    :key="index2"
                    :ref="'subprocess' + index1"
                  >
                    <div class="processwrapper__chart__verticalAxis"></div>
                    <div
                      class="processwrapper__node"
                      v-for="(item3, index3) in item2.children"
                      :key="index3"
                      :class="index3 == 0 ? ' customized__marginTop' : ''"
                    >
                      <div class="processwrapper__node__info">
                        <i
                          class="el-icon-remove processwrapper__node__delete"
                          @click="removeSubNode(index, index1, index2, index3)"
                        ></i>
                        <div class="processwrapper__node__title">
                          {{ item3.title }}
                        </div>
                        <div class="processwrapper__node__content">
                          {{ item3.content }}
                        </div>
                      </div>
                      <img
                        src="@assets/logo.png"
                        alt=""
                        class="processwrapper__node__adder"
                        @click="addSubNode(index, index1, index2, index3)"
                      />
                    </div>
                  </div>
                </div>
                <img
                  src="@assets/logo.png"
                  alt=""
                  class="processwrapper__branchOutWrapper__adder"
                  @click="addNode(index, index1)"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="processwrapper__aligncenter">
          <div class="processwrapper__chart__horizontalLine" ref="horiconnectorB"></div>
        </div>
      </div>
      <!-- 添加条件 -->
      <el-dialog title="条件" :visible.sync="newProTerm" :modal="false" :center="true" width="60%">
        <epConfig :type="0" :textInputLabel="'条件'">
          <el-input
            slot="enterpriceName"
            v-model="termNameInfo"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'条件说明'">
          <el-input
            slot="enterpriceName"
            v-model="termContentInfo"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <span slot="footer" class="dialog-footer">
          <el-button @click="newProTerm = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="submitTermInfo" size="mini">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 添加节点条件 -->
      <el-dialog
        title="新增节点条件"
        :visible.sync="newProNodeTerm"
        :modal="false"
        :center="true"
        width="60%"
      >
        <epConfig :type="0" :textInputLabel="'节点条件'">
          <el-input
            slot="enterpriceName"
            v-model="nodeTermNameInfo"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'条件说明'">
          <el-input
            slot="enterpriceName"
            v-model="nodeContentInfo"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <span slot="footer" class="dialog-footer">
          <el-button @click="newProNodeTerm = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="submitNodeTermInfo" size="mini">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 添加环节 -->
      <el-dialog
        title="审批环节"
        :visible.sync="newProNodeInfo"
        :modal="false"
        :center="true"
        width="60%"
      >
        <epConfig :type="3" :textInputLabel="'环节'">
          <el-select
            v-model="nodeAttr"
            :disabled="banselector"
            placeholder="请选择"
            size="mini"
            slot="enterpriceName"
          >
            <el-option
              v-for="item in nodeElemList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'环节'" v-show="nodeAttr == 0">
          <el-input
            slot="enterpriceName"
            v-model="nodeNameInfo"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'环节说明'" v-show="nodeAttr == 0">
          <el-input
            slot="enterpriceName"
            v-model="nodeContentInfo"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'环节条件1'" v-show="nodeAttr == 1">
          <el-input
            slot="enterpriceName"
            v-model="subNodeName1"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'环节说明1'" v-show="nodeAttr == 1">
          <el-input
            slot="enterpriceName"
            v-model="subNodeContent1"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'环节条件2'" v-show="nodeAttr == 1">
          <el-input
            slot="enterpriceName"
            v-model="subNodeName2"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'环节说明2'" v-show="nodeAttr == 1">
          <el-input
            slot="enterpriceName"
            v-model="subNodeContent2"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <span slot="footer" class="dialog-footer">
          <el-button @click="newProNodeInfo = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="submitNodeInfo" size="mini">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑发起人 -->
      <el-dialog
        title="审批环节"
        :visible.sync="toEditApplicant"
        :modal="false"
        :center="true"
        width="60%"
      >
        <epConfig :type="3" :textInputLabel="'请选择申请人'">
          <el-select v-model="applicant" placeholder="请选择" size="mini" slot="enterpriceName">
            <el-option
              v-for="item in applicantList"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </epConfig>
        <span slot="footer" class="dialog-footer">
          <el-button @click="toEditApplicant = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="cfmEditApplicant" size="mini">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑 -->
      <el-dialog
        title="审批环节"
        :visible.sync="toEditNode"
        :modal="false"
        :center="true"
        width="60%"
      >
        <epConfig :type="3" :textInputLabel="'请选择申请人'">
          <el-select v-model="nodeAttr" placeholder="请选择" size="mini" slot="enterpriceName">
            <el-option
              v-for="item in nodeElemList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'环节'" v-show="nodeAttr == 0">
          <el-input
            slot="enterpriceName"
            v-model="nodeNameInfo"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'环节说明'" v-show="nodeAttr == 0">
          <el-input
            slot="enterpriceName"
            v-model="nodeContentInfo"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'环节条件1'" v-show="nodeAttr == 1">
          <el-input
            slot="enterpriceName"
            v-model="subNodeName1"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'环节说明1'" v-show="nodeAttr == 1">
          <el-input
            slot="enterpriceName"
            v-model="subNodeContent1"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'环节条件2'" v-show="nodeAttr == 1">
          <el-input
            slot="enterpriceName"
            v-model="subNodeName2"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <epConfig :type="0" :textInputLabel="'环节说明2'" v-show="nodeAttr == 1">
          <el-input
            slot="enterpriceName"
            v-model="subNodeContent2"
            class="customized__gapRight"
          ></el-input>
        </epConfig>
        <span slot="footer" class="dialog-footer">
          <el-button @click="newProNodeInfo = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="submitNodeInfo" size="mini">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </main-card>
</template>
<script>
  export default {
    data() {
      return {
        VUE_APP_MODE: process.env.VUE_APP_MODE,
        applicant: 'Sniper',
        processList: [],
        newProTerm: false,
        termNameInfo: '',
        termContentInfo: '',
        newProNodeTerm: false,
        nodeTermNameInfo: '',
        newProNodeInfo: false,
        nodeNameInfo: '',
        nodeContentInfo: '',
        nodeElemList: [
          { value: 0, label: '节点' },
          { value: 1, label: '节点条件' }
        ],
        nodeAttr: 0, // 0 输入框, 1选择框 2二级条件
        subNodeName1: '',
        subNodeName2: '',
        subNodeContent1: '',
        subNodeContent2: '',
        father: '',
        son: '',
        grandson: '',
        grand2son: '',
        banselector: false,
        level: 0, //0 一级节点 1 二级节点 2 二级条件
        toEditApplicant: false,
        applicantList: [
          { value: 0, label: 'sniper' },
          { value: 1, label: 'Trang' },
          { value: 2, label: 'Quyen' }
        ],
        toEditNode: false
      };
    },
    methods: {
      addTerm() {
        var _this = this;
        _this.termNameInfo = '';
        _this.termContentInfo = '';
        _this.newProTerm = true;
      },
      submitTermInfo() {
        var _this = this;
        var childrenElem = Object.assign({
          type: 'block',
          title: _this.termNameInfo,
          content: _this.termContentInfo,
          children: []
        });
        var termObj = Object.assign({
          item: _this.termNameInfo,
          children: [childrenElem]
        });
        _this.processList.push(termObj);
        _this.$nextTick(() => {
          _this.calcConnectorWidth();
        });
        _this.newProTerm = false;
      },
      addNodeTerm(index, index1) {
        var _this = this;
        _this.father = index;
        _this.son = index1;
        _this.level = 2;
        _this.nodeTermNameInfo = '';
        _this.nodeContentInfo = '';
        _this.newProNodeTerm = true;
      },
      submitNodeTermInfo() {
        var _this = this;
        var nodeElem2 = Object.assign({
          title: _this.nodeTermNameInfo,
          type: 'block',
          content: _this.nodeContentInfo,
          children: [
            {
              title: _this.nodeTermNameInfo,
              content: _this.nodeContentInfo,
              type: 'block',
              children: []
            }
          ]
        });
        _this.processList[_this.father].children[_this.son].children.push(nodeElem2);
        _this.$nextTick(() => {
          _this.calcConnectorWidth();
        });
        _this.newProNodeTerm = false;
      },
      addNode(index, index1) {
        var _this = this;
        _this.father = index;
        _this.son = index1;
        _this.banselector = false;
        _this.level = 0;
        _this.nodeNameInfo = '';
        _this.nodeContentInfo = '';
        _this.subNodeName1 = '';
        _this.subNodeName2 = '';
        _this.subNodeContent1 = '';
        _this.subNodeContent2 = '';
        _this.newProNodeInfo = true;
      },
      submitNodeInfo() {
        var _this = this;
        //添加一级节点
        if (_this.level == 0) {
          var nodeChildren = [];
          if (_this.nodeAttr == 1) {
            var term1 = Object.assign({
              title: _this.subNodeName1,
              type: 'block',
              content: '',
              children: [
                {
                  title: _this.subNodeName1,
                  type: 'block',
                  content: _this.subNodeContent1,
                  children: []
                }
              ]
            });
            var term2 = Object.assign({
              title: _this.subNodeName2,
              type: 'block',
              content: '',
              children: [
                {
                  title: _this.subNodeName2,
                  type: 'block',
                  content: _this.subNodeContent2,
                  children: []
                }
              ]
            });
            nodeChildren.push(term1);
            nodeChildren.push(term2);
          }
          var nodeElem = Object.assign({
            title: _this.nodeNameInfo,
            content: _this.nodeAttr == 1 ? '' : _this.nodeContentInfo,
            type: _this.nodeAttr == 0 ? 'block' : 'sub',
            children: nodeChildren
          });
          _this.processList[_this.father].children.splice(_this.son + 1, 0, nodeElem);
        } else if (_this.level == 1) {
          //添加二级节点
          var nodeElem1 = Object.assign({
            title: _this.nodeNameInfo,
            type: 'block',
            content: _this.nodeContentInfo,
            children: []
          });
          _this.processList[_this.father].children[_this.son].children[
            _this.grandson
          ].children.splice(_this.grand2son + 1, 0, nodeElem1);
        }
        _this.nodeAttr = 0;
        _this.newProNodeInfo = false;
        _this.$nextTick(() => {
          _this.calcConnectorWidth();
        });
      },
      removeNode(father, son) {
        var _this = this;
        if (_this.processList[father].children.length > 1) {
          _this.processList[father].children.splice(son, 1);
        } else {
          _this.processList.splice(father, 1);
        }
        _this.$nextTick(() => {
          _this.calcConnectorWidth();
        });
      },
      addSubNode(index, index1, index2, index3) {
        var _this = this;
        _this.father = index;
        _this.son = index1;
        _this.nodeContentInfo = '';
        _this.nodeNameInfo = '';
        _this.nodeContentInfo = '';
        _this.grandson = index2;
        _this.grand2son = index3;
        _this.level = 1;
        _this.nodeAttr = 0;
        _this.banselector = true;
        _this.newProNodeInfo = true;
      },
      removeSubNode(father, son, grandson, grand2son) {
        var _this = this;
        //二级节点没删完的时候--删除二级节点
        if (_this.processList[father].children[son].children[grandson].children.length > 1) {
          _this.processList[father].children[son].children[grandson].children.splice(grand2son, 1);
        } else {
          //二级节点删除完的时候--删除二级条件--判断--还有多少个二级条件
          if (_this.processList[father].children[son].children.length == 2) {
            var addIndex = 0;
            grandson == 0 ? (addIndex = 1) : (addIndex = 0);
            var temp = _this.processList[father].children[son].children[addIndex];
            _this.processList[father].children.splice(son, 1);
            // eslint-disable-next-line no-unused-vars
            temp.children.forEach((tempItem, tempIndex) => {
              var unit = tempItem;
              unit.type = 'block';
              _this.processList[father].children.splice(son, 0, unit);
            });
          } else {
            _this.processList[father].children[son].children.splice(grandson, 1);
          }
        }
        _this.$nextTick(() => {
          _this.calcConnectorWidth();
        });
      },
      //修改-
      editApplicant() {
        var _this = this;
        _this.toEditApplicant = true;
        console.log(_this.applicant);
      },
      cfmEditApplicant() {
        var _this = this;
        _this.toEditApplicant = false;
      },
      calcConnectorWidth() {
        var _this = this;
        if (!_this.$refs.process0 || !_this.$refs['process' + (_this.processList.length - 1)]) {
          return;
        }
        var w = _this.$refs.process0[0].offsetLeft + _this.$refs.process0[0].offsetWidth / 2;
        var t =
          _this.$refs['process' + (_this.processList.length - 1)][0].offsetLeft +
          _this.$refs['process' + (_this.processList.length - 1)][0].offsetWidth / 2;
        var marginLeft =
          _this.$refs.process0[0].offsetWidth / 2 -
          _this.$refs['process' + (_this.processList.length - 1)][0].offsetWidth / 2;
        _this.$refs.horiconnector.style.width = Math.abs(w - t) + 'px';
        _this.$refs.horiconnectorB.style.width = Math.abs(w - t) + 'px';
        _this.$refs.horiconnector.style.marginLeft = marginLeft + 'px';
        _this.$refs.horiconnectorB.style.marginLeft = marginLeft + 'px';
      }
    },
    mounted() {
      var _this = this;
      _this.calcConnectorWidth();
    }
  };
</script>
<style lang="less" scoped>
  #wrapper {
    display: flex;
    flex-flow: row;
    justify-content: center;
    background-color: @white;
  }
  .processwrapper {
    display: flex;
    flex-flow: column;
    padding: 10px;
    &__aligncenter {
      display: flex;
      flex-flow: row;
      width: 100%;
      justify-content: center;
    }
    &__chart1 {
      margin-right: 50px;
      position: relative;
    }
    &__chart1:last-child {
      margin-right: 0;
    }
    &__chart {
      margin-right: 50px;
      position: relative;
      &__verticalAxis {
        height: 100%;
        width: 0px;
        position: absolute;
        left: 50%;
        border-right: 1px solid @regular-border-color;
      }
      &__connectorH {
        width: 100%;
        display: flex;
        flex-flow: row;
        justify-content: center;
      }
      &__horizontalLine {
        height: 0px;
        border-bottom: 1px solid @regular-border-color;
      }
    }
    &__chart:last-child {
      margin-right: 0;
    }
    &__node {
      width: 120px;
      height: 119px;
      display: flex;
      flex-flow: column;
      position: relative;
      &__info {
        width: 120px;
        height: 65px;
        background-color: @white;
        box-shadow: @regular-box-shadow;
      }
      &__title {
        width: 120px;
        height: 25px;
        line-height: 25px;
        text-align: center;
      }
      &__content {
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      &:hover {
        .processwrapper__node__delete {
          display: block;
        }
      }
      &__delete {
        position: absolute;
        right: -8px;
        top: -8px;
        font-size: @font-size-16;
        color: @danger;
        display: none;
      }
      &__connector {
        width: 120px;
        height: 54px;
        display: flex;
        flex-flow: row;
        justify-content: center;
      }
      &__verticalLine {
        width: 1px;
        height: 54px;
        border-right: 1px solid @regular-border-color;
      }
      &__connectorShort {
        width: 120px;
        height: 30px;
        display: flex;
        flex-flow: row;
        justify-content: center;
      }
      &__verticalLineShort {
        width: 1px;
        height: 30px;
        border-right: 1px solid @regular-border-color;
      }
      &__adder {
        width: 24px;
        height: 24px;
        position: absolute;
        bottom: 15px;
        left: calc(50% - 12px);
      }
      &__adder1 {
        width: 24px;
        height: 24px;
        position: absolute;
        bottom: 30px;
        left: calc(50% - 12px);
      }
    }
    &__branchOutWrapper {
      display: flex;
      flex-flow: column;
      position: relative;
      &__adder {
        width: 24px;
        height: 24px;
        position: absolute;
        bottom: 10px;
        left: calc(50% - 12px);
      }
      &__adder1 {
        width: 24px;
        height: 24px;
        position: absolute;
        top: 20px;
        left: calc(50% - 12px);
      }
    }
    &__branchWrapper {
      //width: auto !important;
      display: flex;
      flex-flow: row;
      position: relative;
      background-color: @white;
      margin-top: 30px;
    }
    &__branchWrapper:before {
      content: '';
      width: calc(100% - 120px);
      border-top: 1px solid @regular-border-color;
      position: absolute;
      left: 60px;
    }
    &__branchWrapper:after {
      content: '';
      width: calc(100% - 120px);
      border-bottom: 1px solid @regular-border-color;
      position: absolute;
      left: 60px;
      bottom: 0;
    }
  }
  .customized {
    &__marginTop {
      margin-top: 30px;
    }
    &__marginBottem {
      margin-bottom: 60px;
    }
  }
</style>
